* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  font-size: 0.16rem;
  flex-direction: column;
}

header {
  width: 4rem;
  height: 0.5rem;
  background-color: turquoise;
}

main {
  overflow: hidden;
  width: 4rem;
  height: 100%;
  flex: 1;
  background-color: lightcyan;
}

main > .content {
  position: relative;
  width: 4rem;
  min-height: 101%;
  background-color: lime;
}

main > .content > .refresh {
  position: absolute;
  left: 0;
  top: -0.4rem;
  width: 4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: lightgreen;
  color: #fff;
}

main > .content > .more {
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: aquamarine;
  color: #fff;
}

footer {
  width: 4rem;
  height: 0.5rem;
  background-color: deepskyblue;
}
